<template>
  <!-- @mousemove.stop=" stopIt = true "
  @mouseout.stop=" stopIt = false " -->
  <TipPopover placement="top" :disabled="!isG_roll">
    <template #content>
      <div style="text-align: center;"> {{ content }} </div>
    </template>
    <div class="num_container" ref="container">
      <div class="num_container_item" ref="numItem">
        <slot name="content"></slot>
        <!-- <template v-if="isG_roll" class="ml-20">
          <slot name="content"></slot>
        </template> -->
      </div>
    </div>
  </TipPopover>
</template>

<script lang="ts">
export default {
  name: 'HorizontalScrolling'
}
</script>

<script setup lang="ts">
import { watch, ref, onMounted, nextTick,onUpdated } from 'vue';
const props = defineProps(['tipContent'])

const container = ref<any>(null)
const numItem = ref<any>(null)
const isG_roll = ref(false)
const movePosition = ref(0)
const numPosition = ref(0)
const stopIt = ref(false)
const content = ref(props.tipContent ?? '')
const  speed = 0.5;
const move = () => {
  if (stopIt.value || !isG_roll.value) {
    numPosition.value = 0
    return
  }
  const domItem = (numItem.value as HTMLElement);
  const position = numPosition.value += speed
  if (position >= movePosition.value) {
    numPosition.value = 0
  }
  domItem.style.cssText = `transform: translateX(-${position}px);`
  requestAnimationFrame(() => {
    move()
  })
}



/**
 * 设置是否滚动
 */
const containerFn = () => {
  const dom = (container.value as HTMLElement);
  const maxWidth = dom.offsetWidth;
  dom.style.cssText += `width: ${maxWidth}px;`;
  nextTick(() => {
    const domItem = (numItem.value as HTMLElement);
    const itemWidth = domItem.offsetWidth;
    movePosition.value = itemWidth
    isG_roll.value = itemWidth > maxWidth;
    if(!isG_roll.value){
      domItem.style.cssText = `transform: translateX(${0}px);`
    }
  })
}
// 
watch(() => props.tipContent, (val) => {
  content.value = val
}, { deep: true })

watch(isG_roll, (val) => {
  if (val) {
    move()
  }
}, { deep: true })

watch(stopIt, (val) => {
  if (!val) {
    move()
  }
}, { deep: true })

onMounted(() => {
  containerFn()
})

onUpdated(()=>{
  containerFn()
})
</script>

<style lang="scss" scoped>
.num_container {
  width: 100%;
  width: inherit;
  overflow: hidden;
}

.num_container_item {
  display: inline-block;
  white-space: nowrap;

  >:nth-child(n) {
    display: inline;
  }
}
</style>
